<template>
  <div class="my-page">
        <!-- <van-image class="my-bg" :src="userForm.userAvatar?$store.state.imageHost+userForm.userAvatar:require('../assets/image/beijing2.png')"></van-image> -->
        <div class="my-top">
            <van-image
                round
                class="head-img"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <div>
                <!-- <div class="my-name" @click="updateUserName()">
                    <p class="title">{{userForm.userName||'用户'}}</p>
                    <van-icon name="arrow" color="#43331E" />
                </div> -->
                <div class="my-name">
                    <p class="title">{{userForm.userName||'用户'}}</p>
                </div>
                <div class="my-phone">ID: {{userForm.userNo}}</div>
            </div>
        </div>
        <div class="member-box">
            <van-image class="member-box-bg" :src="require('../assets/image/bg-top.png')"></van-image>
            <div class="member-star">
                <p class="title">{{  $i18n.t('default.my.memberCenter') }}</p>
                <div class="desc">
                    <van-image class="star-img" v-for="i in userForm.levelNum" :key="i" width="16" height="16" :src="require('../assets/image/els/star.png')"></van-image>
                </div>
            </div>
            <div class="member-btn" @click="gotoPage('/member')">{{  $i18n.t('default.my.view') }}</div>
        </div>
        <div class="my-content">
            <div class="cell-box">
                <div class="cell" @click="gotoPage('/order')">
                        <div class="cell-info">
                            <!-- <van-image class="cell-img" :src="require('../assets/image/dingdan.png')"></van-image> -->
                            <p class="title">{{  $i18n.t('default.my.order') }}</p>
                        </div>
                        <van-icon class="icon" name="arrow" />
                </div>
            </div>
            <!-- <div class="cell-box">
                <div class="cell" @click="gotoPage('/bank')">
                        <div class="cell-info">
                            <p class="title">银行资料</p>
                        </div>
                        <van-icon class="icon" name="arrow" />
                </div>
            </div> -->
            <div class="cell-box">
                <div class="cell" @click="gotoPage('/netStruc')">
                        <div class="cell-info">
                            <p class="title">{{  $i18n.t('default.my.network') }}</p>
                        </div>
                        <van-icon class="icon" name="arrow" />
                </div>
            </div>
            <!-- <div class="cell-box">
                <div class="cell " @click="gotoPage('/personalDataManager')">
                        <div class="cell-info">
                            <p class="title">个人资料</p>
                        </div>
                        <van-icon class="icon" name="arrow" />
                </div>
            </div> -->
        </div>
        <div class="fixed-buttons">
            <van-button class="remove-btn" block @click="removeLogin">{{  $i18n.t('default.my.logout') }}</van-button>
            <div class="register">
                <!-- <span @click="gotoRegister">没有账号？立即注册</span> -->
                <span @click="changeLang('zh')">{{$i18n.t('default.other.chinese')}}</span>
                <span @click="changeLang('ru')">{{$i18n.t('default.other.russian')}}</span>
                <span @click="changeLang('es')">{{$i18n.t('default.other.spanish')}}</span>
            </div>
        </div>
        <v-navBar></v-navBar>
        <van-dialog v-model="nameShow" show-cancel-button @confirm="onConfirm">
            <div class="username-dialog-content">
                <van-field class="input van-hairline--surround" v-model="userForm.userName" placeholder="请输入要修改的用户名" />
            </div>
        </van-dialog>
        
  </div>
</template>
<script>
import VConsole from 'vconsole';
export default{
  data(){
      return {
        userForm: {
            userName:'',
            userID: '',
            userAvatar: '',
        },
        nameShow: false,
      }
  },
  created(){
    this.$store.commit('setNavBarNum',2);
    this.init(); 
  },
  mounted(){
    //   // const vConsole = new VConsole();
    //   if (!this.$store.state.token) {
    //       this.getCode();
    //   } else {
    //       this.servicesForm = this.$route.query.goodsID;
    //       // if(this.$route.query.isFirstOrder){
    //       //     this.isFirstOrder = JSON.parse(this.$route.query.isFirstOrder);
    //       // }
    //       if(this.$route.query.techID){
    //           this.persionInfo = this.$route.query.techID;
    //       }
    //       this.getUserInfo();
    //       this.getGoodsInfo(this.servicesForm);
    //       this.getComments();
    //       this.getPaid();
    //   }
  },
  methods:{
    changeLang(lang){
        this.changeLanguage(this,lang)
        this.handleLang(lang)
    },
    handleLang(command){
        console.log('用户名下拉菜单选择事件 command:',command)
        var _this = this
        console.log(command)
        localStorage.setItem('lang',command);
        this.$i18n.locale = command;
        this.$store.state.Local = command;
        command = command == 'ru'? 'russia':command == 'es'?'mexico':'zh'
    },
    gotoPage(value){
        this.$router.push({path:value});
    },
    updateUserName(){
        this.nameShow = true;
    },
    onConfirm(e){
        this.$toast('修改成功');
        this.nameShow = false;
    },
    removeLogin(){
        this.$store.commit('setToken',null);
        this.$router.push('/login');
    },
    gotoPage(page){
        this.$router.push({path:page});
    },
    init(){
        this.$api.get(this.$url.user.info).then(res=>{
          console.log('my...res:',res)
          if(res.code == 'SUCCESS'){
              this.userForm = res.data;
              this.$store.commit('setUserInfo',res.data);
          }else{
              
          }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/variable.scss";
.username-dialog-content{
    padding: .3rem;
    .input{
        border-bottom: 1px solid #eee;
    }
}
.my-page{
    background: url('../assets/image/my-bg.png') no-repeat 100%;
    min-height: 100vh;
    position:relative;
    padding: 0 .3rem;
}
.my-bg{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 4.8rem;
}
.my-top{
    position: relative;
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: flex-start;    
    z-index: 1;
    height: 2.14rem;
    color: #43331E;
}
.head-img{
    // margin-top: 1rem;
    width:1.2rem;
    height: 1.2rem;
    margin-right: .3rem;
}
.my-name{
    font-size: .3rem;
    display: flex;
    align-items: center;
    .title{
        margin-right: .1rem;
    }
}
.my-phone{
    margin-top: .16rem;
}
.my-content{
    position: relative;
    z-index: 1;
    // height: 3.6rem;
    // margin-top: -1.11rem;
    // background: #fff;
    // border-radius: 10px;
}
.cell-box{
    height:.88rem;
    margin-bottom: .3rem;
}
.cell{
    padding: 0 .3rem;
    height:.88rem;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: .05rem;;
    border: 1px solid #755936;
    justify-content: space-between;
    
}
.not-border{
    border: none;
}
.cell-info{
    display: flex;align-items: center;
    .cell-img{
        width: .36rem;
    }
    .title{
        font-size: .28rem;
        color:#755936;
    }
}
.remove-btn{
    width: 3rem;
    height: .8rem;
    margin: 1.1rem auto 0;
    border-radius: 0.4rem;
    border: 0px solid #939393;
}

.member-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 1.6rem;
    border-radius: 0.3rem;
    margin-bottom: .51rem;
    padding: 0 .3rem;
    .member-box-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1.6rem;
        border-radius: 0.3rem;
        z-index: 0;
    }
    .member-star{
        z-index: 9;
        margin-left: .98rem;
        .desc{
            display: flex;
        }
        .star-img{
            margin-right: .05rem;
        }
    }
    .member-btn{
        z-index: 9;
        width: 2.27rem;
        height: 0.68rem;
        background: #755936;
        border-radius: 0.34rem;
        color: #FFF2CA;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.register{
        text-align: center;
        margin-top: .3rem;
        span{
            font-size: .28rem;
            color: #755936;
            padding: 0 .2rem;
            text-decoration: underline;
        }
    }
    .fixed-buttons{
        position: fixed;
        bottom: 3rem;
        left: 0;
        width: 100%;
        height: 1rem;
    }
    .van-cell{
        padding: 0;
    }
    .van-cell__title{
        font-size: .28rem;
    }
    .van-cell__value{
        font-size: .28rem;
    }
    .van-cell__right-icon{
        font-size: .28rem;
    }
    .van-dialog__header{
        font-size: .32rem;
    }
</style>

<style>
  .member-box .member-box-bg .van-image__img{
      border-radius: 0.3rem;
  }  
</style>